<nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="student.id ? '学生信息详情' : '新增学生信息'"
  (nzOnCancel)="handleCancel()" [nzFooter]="detailFooter" nzWidth="1200">

  <form nz-form [formGroup]="validateForm" #myForm="ngForm">
    <div nz-row [nzGutter]="16">
      <b style="color: red;">基本信息</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>所属学院</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <app-academy-select [(academyId)]="student.academyId" [academyName]="student.academyName"
              [isPreView]="isPreView" *ngIf="!isPreView; else academyTemp">
            </app-academy-select>
            <ng-template #academyTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.academyName }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>所属专业</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <app-profession-select [(academyId)]="student.academyId" [(professionId)]="student.professionId"
              [professionName]="student.professionName" [isPreView]="isPreView" *ngIf="!isPreView; else professionTemp">
            </app-profession-select>
            <ng-template #professionTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.professionName }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzRequired>所属班级</nz-form-label>
          <nz-form-control [nzSpan]="14">
            <app-class-select [(academyId)]="student.academyId" [(professionId)]="student.professionId"
              [(classId)]="student.classId" [className]="student.className" [isPreView]="isPreView"
              *ngIf="!isPreView; else classTemp">
            </app-class-select>
            <ng-template #classTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.className }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>

    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="grade" nzRequired>所属年级</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="gradeErrorTpl">
            <nz-year-picker nzPlaceHolder="年级所属年份" formControlName="grade" [(ngModel)]="student.grade"
              *ngIf="!isPreView; else gradeTemp"></nz-year-picker>
            <ng-template #gradeErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请选择年级所属年份!
              </ng-container>
            </ng-template>
            <ng-template #gradeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.grade }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="code" nzRequired><span>
              学生学号
              <i nz-icon nz-tooltip [nzTitle]="'学号用于注册登录账号，密码默认为' + defualtPW" style="color: red;"
                nzType="question-circle" nzTheme="outline"></i> </span></nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="codeErrorTpl">
            <input nz-input formControlName="code" [(ngModel)]="student.code" placeholder="学生学号必填"
              *ngIf="!isPreView; else codeTemp" (ngModelChange)="codeChange($event)">
            <ng-template #codeErrorTpl let-control>
              <ng-container *ngIf="control.hasError('pattern')">
                请输入数字0-9!
              </ng-container>
              <ng-container *ngIf="control.hasError('required')">
                请输入学生学号!
              </ng-container>
              <ng-container *ngIf="control.hasError('duplicated')">
                该学号已存在!
              </ng-container>
              <ng-container *ngIf="control.hasError('blank')">
                不可输入空格!
              </ng-container>
            </ng-template>
            <ng-template #codeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.code }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label [nzSpan]="10" nzFor="name" nzRequired>学生姓名</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="nameErrorTpl">
            <input nz-input formControlName="name" [(ngModel)]="student.name" placeholder="学生姓名必填"
              *ngIf="!isPreView; else nameTemp">
            <ng-template #nameErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入学生姓名!
              </ng-container>
              <ng-container *ngIf="control.hasError('pattern')">
                不能存在空格字符!
              </ng-container>
            </ng-template>
            <ng-template #nameTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.name }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="gender" nzRequired [nzSpan]="10">性别</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="genderErrorTpl">
            <nz-select [(ngModel)]="student.gender" nzAllowClear nzPlaceHolder="请选择" formControlName="gender"
              *ngIf="!isPreView; else genderTemp">
              <nz-option nzValue="MALE" nzLabel="男"></nz-option>
              <nz-option nzValue="FEMALE" nzLabel="女"></nz-option>
            </nz-select>
            <ng-template #genderErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请选择性比!
              </ng-container>
            </ng-template>
            <ng-template #genderTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.gender === 'MALE' ? '男' : '女' }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="joinTime" nzRequired [nzSpan]="10">入学时间</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <nz-date-picker [(ngModel)]="student.joinTime" formControlName="joinTime"
              *ngIf="!isPreView; else joinTimeTemp"></nz-date-picker>
            <ng-template #joinTimeTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.joinTime | date: 'yyy-MM-dd' }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="studyYears" nzRequired [nzSpan]="10">学制</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback [nzErrorTip]="studyYearsErrorTpl">
            <nz-input-number [(ngModel)]="student.studyYears" [nzMin]="1" [nzMax]="10" [nzStep]="1"
              formControlName="studyYears" *ngIf="!isPreView; else studyYearsTemp">
            </nz-input-number>
            <ng-template #studyYearsErrorTpl let-control>
              <ng-container *ngIf="control.hasError('required')">
                请输入学习年限!
              </ng-container>
            </ng-template>
            <ng-template #studyYearsTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.studyYears }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="isClassEvaluationAdmin" [nzSpan]="10">是否班级综测管理员</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <nz-radio-group [(ngModel)]="student.isClassEvaluationAdmin" formControlName="isClassEvaluationAdmin"
              *ngIf="!isPreView; else isClassEvaluationAdminTemp">
              <label nz-radio [nzValue]="true">是</label>
              <label nz-radio [nzValue]="false">否</label>
            </nz-radio-group>
            <ng-template #isClassEvaluationAdminTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.isClassEvaluationAdmin ? '是' : '否' }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <b style="color: red;">学生其他信息</b>
      <nz-divider nzType="horizontal"></nz-divider>
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="politicStatus" [nzSpan]="10">政治面貌</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <nz-select [(ngModel)]="student.studentDetail.politicStatus" nzAllowClear nzPlaceHolder="请选择"
              formControlName="politicStatus" *ngIf="!isPreView; else politicStatusTemp">
              <nz-option nzValue="普通民众" nzLabel="普通民众"></nz-option>
              <nz-option nzValue="共青团员" nzLabel="共青团员"></nz-option>
              <nz-option nzValue="发展对象" nzLabel="发展对象"></nz-option>
              <nz-option nzValue="预备党员" nzLabel="预备党员"></nz-option>
              <nz-option nzValue="党员" nzLabel="党员"></nz-option>
            </nz-select>
            <ng-template #politicStatusTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.studentDetail?.politicStatus }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="phone" [nzSpan]="10">联系电话</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <input nz-input formControlName="phone" [(ngModel)]="student.studentDetail.phone" placeholder="请输入"
              *ngIf="!isPreView; else phoneTemp">
            <ng-template #phoneTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.studentDetail?.phone }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="idCard" [nzSpan]="10">身份证号码</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <input nz-input formControlName="idCard" [(ngModel)]="student.studentDetail.idCard" placeholder="请输入"
              *ngIf="!isPreView; else idCardTemp">
            <ng-template #idCardTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.studentDetail?.idCard }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>

    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="7">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="familyName" [nzSpan]="10">家庭联系人</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <input nz-input formControlName="familyName" [(ngModel)]="student.studentDetail.familyName"
              placeholder="请输入" *ngIf="!isPreView; else familyNameTemp">
            <ng-template #familyNameTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.studentDetail?.familyName }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="familyPhone" [nzSpan]="10">家庭联系电话</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <input nz-input formControlName="familyPhone" [(ngModel)]="student.studentDetail.familyPhone"
              placeholder="请输入" *ngIf="!isPreView; else familyPhoneTemp">
            <ng-template #familyPhoneTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.studentDetail?.familyPhone }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item nzFlex nz-row>
          <nz-form-label nzFor="birthDate" [nzSpan]="10">出生日期</nz-form-label>
          <nz-form-control [nzSpan]="14" nzHasFeedback>
            <nz-date-picker [(ngModel)]="student.studentDetail.birthDate" formControlName="birthDate"
              *ngIf="!isPreView; else birthDateTemp"></nz-date-picker>
            <ng-template #birthDateTemp>
              <div class="editable-cell">
                <div class="editable-cell-value-wrap text-truncate">
                  {{ student?.studentDetail?.birthDate | date: 'yyy-MM-dd' }}
                </div>
              </div>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>

  <ng-template #detailFooter>
    <button nz-button nzType="primary" (click)="save()" *ngIf="!isPreView" [nzLoading]="loading">
      <span>保存</span>
    </button>
    <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
  </ng-template>
</nz-modal>
